<template>
  <searchArea :fieldlist="searchList" @search="search" @reset="search" />

  <q-table
    :grid="grid"
    :rows="data"
    :columns="columns"
    row-key="id"
    v-model:pagination="pagination"
    :loading="loading"
    :filter="filter"
    :rows-per-page-options="[25, 50, 100, 0]"
    @request="onRequest"
    binary-state-sort
    :visible-columns="visibleColumns"
    :style="$q.screen.xs ? '' : 'max-height: calc(100vh - 100px)'"
    class="my-sticky-virtscroll-table"
  >
    <template v-slot:top>
      <div class="q-table__title q-mr-md">{{ modelLabel }}</div>
      <q-select
        label="选择显示列"
        v-model="visibleColumns"
        multiple
        borderless
        dense
        options-dense
        :display-value="visibleColumns.length + '/' + columns.length + '列'"
        emit-value
        map-options
        :options="columns"
        option-value="name"
        :style="{'min-width': $q.screen.xs ? '100px' : '150px'}"
      />
      <q-btn :icon="grid ? 'table_view' : 'grid_view'" dense @click="grid = !grid" />
      <q-space />
      <div class="q-gutter-sm">
        <q-btn label="新增" color="primary" icon="add" :dense="$q.screen.xs" @click="goDetail(-1)" v-if="canAdd">
          <q-tooltip>新增{{ modelLabel }}</q-tooltip>
        </q-btn>
      </div>

    </template>

    <template v-slot:body="props">
      <q-tr :props="props">
        <q-td :key="col.name" :props="props" v-for="col in props.cols">
          <div v-if="col.name === 'operate'" class="q-gutter-sm">
            <q-btn color="secondary" :label="canEdit || props.row._owner ? '修改' : '查看'" dense @click="goDetail(props.row.id)">
              <q-tooltip>修改{{ modelLabe }}</q-tooltip>
            </q-btn>
            <q-btn color="grey" flat label="删除" dense @click="deleteDetail(props.row.id)" v-if="canDelete(props.row)">
              <q-tooltip>删除{{ modelLabel }}</q-tooltip>
            </q-btn>
            <q-btn color="info" label="分享" dense @click="shareFunc(props.row)">
              <q-tooltip>分享{{ modelLabe }}</q-tooltip>
            </q-btn>
            <q-btn round color="brown" :icon="props.expand ? 'expand_more' : 'expand_less'" size="sm" @click="props.expand = !props.expand">
              <q-tooltip>{{props.expand ? '收缩' : '明细'}}</q-tooltip>
            </q-btn>
          </div>
          <div v-else-if="col.name === 'remark'" class="ellipsis" style="max-width: 300px;" @click="confirmBox('详情', col.value)">
            {{ col.value }}
            <q-tooltip>点击查看详情</q-tooltip>
          </div>
          <div v-else class="ellipsis">
            {{ col.value }}
          </div>
        </q-td>
      </q-tr>

      <!-- 明细行详情 -->
      <q-tr :props="props" v-if="props.expand">
        <q-td colspan="100%" class="bg-grey-2 inset-shadow">
          <div class="flex">
            <q-table
              dense
              flat
              separator="cell"
              bordered
              :columns="detailColumns"
              :rows="props.row[detailModuleName]"
              class="my-sticky-child"
            >
              <template v-slot:body="props">
                <q-tr :props="props">
                  <q-td :key="col.name" :props="props" v-for="col in props.cols">
                    <div v-if="col.name === 'material_name_model'">
                      <div class="flex items-center no-wrap">
                        <viewer :images="props.row.material_image" class="flex">
                          <template #default="scope">
                            <div class="image-box-xs" v-for="img in scope.images" :key="img.thumb">
                              <img class="fit-thumb" :src="img.image" :data-src="img.image" />
                            </div>
                          </template>
                        </viewer>
                        {{col.value}}
                      </div>
                    </div>
                    <div v-else class="ellipsis">
                      {{ col.value }}
                    </div>
                  </q-td>
                </q-tr>
              </template>

              <template v-slot:bottom-row="{ cols }">
                <q-tr class="bg-yellow-2 text-center text-bold">
                  <q-td v-for="col of cols" :key="col.name">
                    {{ col.footer && col.footer.label ? (typeof col.footer.label === 'function' ? col.footer.label(props.row[detailModuleName], props.row) : col.footer.label) : '' }}
                  </q-td>
                </q-tr>
              </template>
            </q-table>
          </div>
        </q-td>
      </q-tr>
    </template>

    <template v-slot:item="props">
      <q-list dense class="fit shadow-1 q-mb-md q-py-md">
        <q-item v-for="col in props.cols.filter(col => !col.delay || props.row._hidden)" :key="col.name">
          <q-item-section class="text-grey-8">
            <q-item-label>{{ col.label }}</q-item-label>
          </q-item-section>
          <q-item-section>
            <div v-if="col.name === 'operate'">
              <q-btn color="secondary" :label="canEdit || props.row._owner ? '修改' : '查看'" @click="goDetail(props.row.id)"  v-if="canEdit|| props.row._owner" />
              <q-btn color="grey" label="删除" @click="deleteDetail(props.row.id)"  v-if="canDelete(props.row)" />
              <q-btn color="info" label="分享" @click="shareFunc(props.row)" />
              <q-btn color="brown" :label="props.expand ? '收缩' : '明细'" @click="props.expand = !props.expand" />
            </div>
            <q-item-label v-else :class="columns.find(v => v.name === col.name).classes || ''">{{ col.value }}</q-item-label>
          </q-item-section>
        </q-item>

        <q-item>
          <q-btn
            class="full-width"
            dense
            style="padding: 0;"
            :label="props.row._hidden ? '隐藏' : '更多'"
            :icon="props.row._hidden ? 'arrow_drop_up' : 'arrow_drop_down'"
            outline
            color="grey"
            @click="props.row._hidden = !props.row._hidden"
          />
        </q-item>

        <div v-if="props.expand" class="bg-grey-2 inset-shadow q-py-xs">
          <q-list dense class="fit" v-for="(row, idx) in props.row[detailModuleName]" :key="idx" >
            <q-item v-for="(col, index) in detailColumns" :key="col.name">
              <q-item-section class="text-grey-8">
                <q-item-label>
                  <q-badge v-if="index === 0" color="blue" :label="idx + 1" />
                  {{ col.label }}
                </q-item-label>
              </q-item-section>
              <q-item-section>
                <q-item-label v-if="col.name === 'material_name_model'">
                  <div class="flex justify-start items-center">
                    <viewer :images="row.material_image" class="flex">
                      <template #default="scope">
                        <div class="image-box-xs" v-for="img in scope.images" :key="img.thumb">
                          <img class="fit-thumb" :src="img.image" :data-src="img.image" />
                        </div>
                      </template>
                    </viewer>
                    {{ row[col.field] }}
                  </div>
                </q-item-label>
                <q-item-label v-else class="flex items-center">
                  {{ typeof col.format === 'function' ? col.format(row[col.field], row) : row[col.field] }}
                </q-item-label>
              </q-item-section>
            </q-item>
            <q-separator inset spaced v-if="idx < props.row[detailModuleName].length - 1" />
          </q-list>

          <q-list dense class="fit bg-yellow-2">
            <q-item v-for="(col, idx) in detailColumns.filter(v => v.footer && v.footer.label)" :key="idx">
              <q-item-section class="text-grey-8">
                <q-item-label>{{ idx === 0 ? col.footer.label : col.label }}</q-item-label>
              </q-item-section>
              <q-item-section v-if="idx > 0" class="text-bold">
                <q-item-label>{{ typeof col.footer.label === 'function' ? col.footer.label(props.row[detailModuleName], props.row) : col.footer.label }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </div>

      </q-list>
    </template>
  </q-table>

  <shareDialog
    ref="share"
    :title="share.title"
    :codeTitle="share.codeTitle"
    :codeSubTitle="share.codeSubTitle"
    :url="share.url"
  />
</template>

<script>
import { defineComponent } from 'vue';
import searchArea from 'src/components/SearchArea.vue';
import { listPageMix } from 'src/lib/mixin.js';
import pageConfig from 'app/search/tenant/delivery/list.js';
import { useMeta } from 'quasar';
import { useStore } from 'stores/store';
import { isNumber } from 'src/lib/utils.js';
import shareDialog from 'components/DialogShare.vue';
import { encrypt } from 'app/src-ssr/util/crypto.js';
import moment from 'moment';
import dialogForm from 'src/components/DialogInputForm.vue';

export default defineComponent({
  name: 'deliveryList',
  setup (props, context) {
    const $store = useStore();
    const modelLabel = '配送单';
    const moduleName = 'delivery';
    const detailModuleName = 't_delivery_details';
    const submoduleName = 'list';
    const listApi = `/c2/tenant/${moduleName}/list`; // 数据列表接口
    const deleteApi = `/c2/tenant/${moduleName}/destroy`; // 删除接口
    const shareApi = `/c2/tenant/${moduleName}/shareUrl`; // 分享接口
    const taskNumApi = `/c2/tenant/${moduleName}/taskNumber`; // 任务数量接口

    useMeta({
      // 设置文件标题
      title: `${modelLabel}列表 - ${$store.siteConfig.appName} - 木多鱼系列`
    });

    return {
      modelLabel,
      moduleName,
      detailModuleName,
      submoduleName,
      listApi,
      deleteApi,
      shareApi,
      taskNumApi
    }
  },
  components: {
    searchArea,
    shareDialog,
    dialogForm
  },
  mixins: [listPageMix],
  data () {
    return {
      columns: [
        { name: 'operate', label: '操作', align: 'center' },
        { name: 'bill_no', label: '配送单号', field: 'bill_no', sortable: true, align: 'center' },
        { name: 'logistics', label: '物流公司', field: 'logistics', sortable: true, align: 'center' },
        { name: 'logistics_no', label: '物流单号', field: 'logistics_no', sortable: true, align: 'center' },
        { name: 'consignee', label: '联系人', field: 'consignee', sortable: true, align: 'center' },
        { name: 'tel', label: '联系电话', field: 'tel', sortable: true, align: 'center' },
        { name: 'address', label: '地址', field: 'address', sortable: true, align: 'center' },
        { name: 'delivery_fee', label: '送货费', field: 'delivery_fee', sortable: true, align: 'center', format: val => val && val.toFixed(2) + ' 元' },
        { name: 'remark', label: '备注', field: 'remark', align: 'center', delay: true },
        { name: 'reading_times', label: '分享阅读次数', field: 'reading_times', sortable: true, align: 'center', delay: true },
        { name: 'create_date', label: '创建日期', field: 'create_date', align: 'center', delay: true },
        { name: 'create_user_name', label: '创建人', field: 'create_user_name', sortable: true, align: 'center', delay: true },
        { name: 'modify_date', label: '修改日期', field: 'modify_date', align: 'center', delay: true },
        { name: 'modify_user_name', label: '修改人', field: 'modify_user_name', sortable: true, align: 'center', delay: true }
      ],
      detailColumns: [
        { name: 'sale_bill_no', label: '销售单号', field: 'sale_bill_no', sortable: true, align: 'center' },
        { name: 'type', label: '销售单类型', field: 'type', sortable: true, align: 'center', format: val => val && this.dictObj && this.dictObj.saleType && this.dictObj.saleType[val] && this.dictObj.saleType[val].label },
        { name: 'customer_name', label: '客户', field: 'customer_name', sortable: true, align: 'center' },
        { name: 'consumer_name', label: '消费者', field: 'consumer_name', sortable: true, align: 'center' },
        { name: 'material_name_model', label: '货物', field: 'material_name_model', sortable: true, align: 'center' },
        { name: 'sale_amount', label: '销售数量', field: 'sale_amount', sortable: true, align: 'center', format: (val, row) => `${Number(val)} ${row.material_unit || ''}` },
        { name: 'deliver_amount', label: '配送数量', field: 'deliver_amount', sortable: true, align: 'center', format: (val, row) => `${Number(val)} ${row.material_unit || ''}` },
        { name: 'remark', label: '配送备注', field: 'remark', sortable: true, align: 'center' }
      ],
      share: {
        id: '',
        title: '',
        codeTitle: '',
        codeSubTitle: '',
        url: '',
        email: false
      }
    }
  },
  created () {
    this.assembly(pageConfig.search); // 根据配置生成搜索条件
  },
  mounted () {
    this.initDict(['logistics']);
  },
  methods: {
    canDelete (row) {
      return this.canEdit || row._owner;
    }
  },
  computed: {
    canAdd () {
      return this.rights[this.moduleName] && this.rights[this.moduleName].add;
    },
    canEdit () {
      return this.rights[this.moduleName] && this.rights[this.moduleName].edit;
    }
  },
  watch: {
  }
});
</script>
